<template>
  <div class="box">
    <el-card shadow="never" class="item item1">
      <el-row>
        <el-col :span="5">
          <h3>角色权限</h3>
          <div class="content">
            <div class="item-box active">管理员</div>
            <div class="item-box">管理员</div>
            <div class="item-box">管理员</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="statistics">
            <div id="main1"></div>
            <el-row>
              <el-col :span="7" class="min-text">
                <div class="round"></div>
                <div>预计</div>
                <div>0小时</div>
              </el-col>
              <el-col :span="8" class="min-text">
                <div class="round" style="background-color: #0c64eb"></div>
                <div>消耗</div>
                <div>12小时</div>
              </el-col>
              <el-col :span="8" class="min-text">
                <div class="round" style="background-color: #bed8f3"></div>
                <div>剩余</div>
                <div>0小时</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="task-box">
            <div class="task-item" v-for="item in 3" :key="item">
              <div class="left">
                <div>
                  <span>
                    <i class="el-icon-success" style="color: #00da88"></i>
                    昨日完成的任务 0
                  </span>
                  <el-progress :percentage="50"></el-progress>
                </div>
              </div>
              <div class="right">
                <span>总任务:1</span>
                <span>未完成:1</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" class="item item2">
      <h3>流程图</h3>
      <div class="process">
        <div class="process-item">
          <span style="margin-right: 10px">用户管理员:</span>
        </div>
        <div class="process-item">
          <span style="margin-left: 10px">添加用户</span>
        </div>
        <div class="process-item">
          <span style="margin-left: 10px">维护权限</span>
        </div>
      </div>
      <div class="process">
        <div class="process-item">
          <span style="margin-right: 10px">数据管理员:</span>
        </div>
        <div class="process-item">
          <span style="margin-left: 10px">指标管理</span>
        </div>
        <div class="process-item">
          <span style="margin-left: 10px">政策管理</span>
        </div>
        <div class="process-item">
          <span style="margin-left: 10px">模板管理</span>
        </div>
        <div class="process-item">
          <span style="margin-left: 10px">扩展信息</span>
        </div>
      </div>
      <div class="process">
        <div class="process-item">
          <span style="margin-right: 10px">项目管理员:</span>
        </div>
        <div class="process-item">
          <span style="margin-left: 10px">项目管理</span>
        </div>
        <div class="process-item">
          <span style="margin-left: 10px">项目评价</span>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="item item3">
      <el-row>
        <el-col :span="10">
          <h3>项目总览</h3>
          <div class="overview-big">
            <div class="overview-mine">
              <p>所有项目</p>
              <span class="project-number">7</span>
              <el-button type="primary" icon="el-icon-view">查看所有</el-button>
            </div>
            <div id="main2"></div>
          </div>
        </el-col>
        <el-col :span="14">
          <div id="main3"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import main1 from "./echartsOptions/main1";
import main2 from "./echartsOptions/main2";
import main3 from "./echartsOptions/main3";
export default {
  name: "index",
  data() {
    return {};
  },
  mounted() {
    this.initEcharts(main1, "main1");
    this.initEcharts(main2, "main2");
    this.initEcharts(main3, "main3");
  },
  methods: {
    initEcharts(chart, DomId) {
      let chartDom = document.getElementById(DomId);
      let myChart = echarts.init(chartDom);
      console.log(chartDom, myChart, chart);
      chart && myChart.setOption(chart);
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  box-sizing: border-box;
  background: #f1f0f7;
}
.box .item {
  border: none;
  .content::-webkit-scrollbar {
    // width: 20px;
    // height: 20px;
  }
  .content {
    width: 230px;
    height: 260px;
    margin-bottom: 10px;
    overflow-y: scroll;
    border-right: 1px solid #d6dfe9;
    .active {
      padding-left: 6px !important;
      border-left: 4px solid #036bf1;
    }
    .item-box {
      width: 100%;
      height: 20px;
      padding-left: 10px;
      margin-top: 18px;
      line-height: 20px;
      text-align: left;
      cursor: pointer;
    }
  }
  .statistics {
    width: 250px;
    height: 260px;
    #main1 {
      width: 200px;
      height: 200px;
      margin-left: 20px;
    }
    .min-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      .round {
        width: 10px;
        height: 10px;
        background: #ccc;
        border-radius: 50%;
      }
    }
  }
  .task-box {
    // border: 1px solid #ccc;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    height: 278px;
    .task-item {
      display: flex;
      align-items: center;
      width: 100%;
      .left {
        width: 80%;
      }
      .right {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        span:nth-child(1) {
          margin-bottom: 6px;
        }
      }
    }
  }
  .process {
    display: flex;
    margin-top: 16px;
    .process-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 170px;
      height: 34px;
      margin-right: 16px;
      // background-image: url('../../assets/arr.png');
      background-size: 100% 100%;
      span {
        font-size: 15px;
      }
    }
    .process-item:nth-child(2) {
      // background-image: url('../../assets/arr2.png');
    }
    .process-item:nth-child(3) {
      // background-image: url('../../assets/arr3.png');
    }
    .process-item:nth-child(4) {
      // background-image: url('../../assets/arr4.png');
    }
    .process-item:nth-child(5) {
      // background-image: url('../../assets/arr5.png');
    }
    .process-item:nth-child(6) {
      // background-image: url('../../assets/arr6.png');
    }
  }

  .overview-big {
    display: flex;
    align-items: center;
    .overview-mine {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 420px;
      height: 260px;
      .project-number {
        margin: 14px auto;
        font-size: 58px;
        font-weight: 700;
        color: #3c4353;
      }
    }
    #main2 {
      width: 600px;
      height: 290px;
      margin-left: 20px;
    }
  }
  #main3 {
    flex: 1;
    height: 310px;
    margin-left: 20px;
  }
}
</style>
